import { useState } from 'react';
import './index.css';
import { NavBar } from 'antd-mobile';
import tu11 from '../../assets/zuo.png';
import tu12 from '../../assets/you.png';
import { useNavigate } from 'react-router-dom';
// 实例化WebSocket并且连接服务器
const webSocket = new WebSocket('http://192.168.2.251:3001');

function Index() {
    const navigate = useNavigate();
    const tuzhifa=() => {
        navigate('/zhifa');
    }
    // 管理用户自己的头像路径，可替换成真实的用户头像获取逻辑
    const [userAvatar] = useState(tu12);
    // 管理聊天对方的头像路径，这里假设固定一个默认头像，实际可根据聊天对象不同而改变
    const [friendAvatar] = useState(tu11);

    webSocket.onmessage = function (msg) {
        console.log("接收到新消息:" + msg.data);
        const oFriendItem = document.createElement('div');
        oFriendItem.className = 'friedns-item';

        // 创建包含头像和文本的容器，方便后续布局控制
        const contentContainer = document.createElement('div');
        contentContainer.className = 'friedns-content';

        const oSpan = document.createElement('span');
        oSpan.className = 'friedns';
        const message = document.createTextNode(msg.data);
        oSpan.appendChild(message);

        // 添加聊天对方头像元素
        const imgElement = document.createElement('img');
        imgElement.src = friendAvatar;
        imgElement.className = 'friedns-img';

        // 将头像元素和文本内容元素添加到容器中，先放头像再放文本，方便后续通过CSS调整顺序
        contentContainer.appendChild(imgElement);
        contentContainer.appendChild(oSpan);

        oFriendItem.appendChild(contentContainer);
        (document.getElementById('chatContent') as HTMLElement).appendChild(oFriendItem);
    };

    // 关闭连接
    webSocket.onclose = function () {
        console.log("关闭连接");
    };

    const sendBtn = () => {
        const str = (document.getElementById('content') as HTMLInputElement).value;
        const oMeItem = document.createElement('div');
        oMeItem.className = 'me_item';

        // 创建包含头像和文本的容器，方便后续布局控制
        const contentContainer = document.createElement('div');
        contentContainer.className = 'me_content';

        const oSpan = document.createElement('span');
        oSpan.className = 'me';
        const msg = document.createTextNode(str);
        oSpan.appendChild(msg);

        // 添加用户自己头像元素
        const imgElement = document.createElement('img');
        imgElement.src = userAvatar;
        imgElement.className = 'me_img';

        // 将头像元素和文本内容元素添加到容器中，先放文本再放头像，方便后续通过CSS调整顺序
        contentContainer.appendChild(oSpan);
        contentContainer.appendChild(imgElement);

        oMeItem.appendChild(contentContainer);
        (document.getElementById('chatContent') as HTMLElement).appendChild(oMeItem);
        // 发送后清空消息框
        (document.getElementById('content') as HTMLInputElement).value = '';
        webSocket.send(str);
    };


    return (
        <div className='chat_room'>
            <NavBar onBack={() => tuzhifa()} className='chat_nav'>聊天室</NavBar>
            <div className='chat_content' id="chatContent">
            </div>
            <div className='chat_op'>
                <input className='chat_op_input' type="text" id="content" />
                <input className='chat_op_btn1' type="button" value="发送" onClick={sendBtn} id="send" />
            </div>
        </div>
    );
}

export default Index;